<template>
  <div :class="nsMain.b()">
    <!-- :disabled="disabled" -->
    <!-- <md-upload
      v-if="isEmpty(imgSrc)"
      :class="[
        'layout-image-uploader',
        disabled ? 'layout-image-uploader-disabled' : '',
      ]"
      action="/mediinfo-lyra-cunchu/api/TuPian"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      ref="upload"
      @click.stop
    >
      <span>请上传图片</span>
    </md-upload> -->
    <div
      v-if="isEmpty(imgSrc)"
      :style="myStyle"
      :class="['layout-image-uploader']"
    >
      请上传图片
    </div>
    <md-image
      v-else
      :style="myStyle"
      :src="imgSrc"
      :fit="imgFit"
      @click.stop="handleClick"
      class="layout-iamge"
    />
  </div>
</template>

<script setup>
import {
  ref,
  defineOptions,
  defineProps,
  defineEmits,
  computed,
  watch,
} from "vue";
import { isEmpty } from "lodash";
import { useNamespace } from "@mdfe/medi-ui";

defineOptions({
  name: "layoutUploadImage",
});

const nsMain = useNamespace("uploadMain");

const defaultStyle = {
  style: {
    width: 0,
    height: 0,
  },
  image: {},
  Imagesize: "cover",
  background: "",
  IsAddLink: false,
  linkAddress: "",
};

const props = defineProps({
  componentStyle: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(["change-component-props"]);

const imgSrc = ref(props.componentStyle?.image?.url);
const disabled = ref(!isEmpty(props.componentStyle?.image?.url || {}));
const imgFit = computed(() => {
  return props.componentStyle?.Imagesize || "cover";
});

const myStyle = computed(() => {
  let _Obj = props.componentStyle;
  if (isEmpty(_Obj) || isEmpty(_Obj?.style)) {
    _Obj = defaultStyle;
  }
  return {
    width: _Obj.style.width === 0 ? "100%" : _Obj.style.width + "px",
    height: _Obj.style.height === 0 ? "100%" : _Obj.style.height + "px",
    background: _Obj.background,
    minHeight: "120px",
  };
});

function handleAvatarSuccess(res, file) {
  imgSrc.value = res[0].jueDuiLJ;
  disabled.value = true;
  const _componentStyle = JSON.parse(JSON.stringify(props.componentStyle));
  emits(
    "change-component-props",
    Object.assign(_componentStyle, {
      image: { url: imgSrc.value, name: file.name },
    })
  );
}

function handleClick() {
  if (props.componentStyle?.IsAddLink && props.componentStyle.linkAddress) {
    // 开始了添加链接并且存在链接
    window.open(props.componentStyle.linkAddress);
  }
}

watch(
  () => props.componentStyle,
  (newComponentStyle) => {
    if (!isEmpty(newComponentStyle)) {
      imgSrc.value = newComponentStyle.image?.url;
      disabled.value = true;
    }
  },
  {
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
// @import '@mdfe/medi-ui/bem.scss';

// @include md-b('uploadMain') {
//   width: 100%;
//   height: 100%;
//   overflow: hidden;
//   display: flex;
//   align-items: center;
//   justify-content: center;
// }

// .layout-image-uploader {
//   width: 100%;
//   min-height: 60px;
//   border: 1px dashed #bbb;

//   .layout-iamge {
//     width: 100%;
//     height: 100%;
//   }

//   ::v-deep {
//     @include c('upload') {
//       display: flex;
//       align-items: center;
//       justify-content: center;
//       width: 100%;
//       height: 100%;
//       font-weight: bolder;
//       font-size: larger;
//       color: rgb(var(--md-color-6));

//       img {
//         height: 100%;
//         width: 100%;
//         object-fit: contain;
//       }
//     }
//   }

//   &-disabled {
//     ::v-deep {
//       @include c('upload') {
//         cursor: not-allowed;
//         // @include md-def('color', 'disabled-color');
//         color: var(--disabled-color-base);
//       }
//     }
//   }
// }
</style>
